<template>
	<view class="zuipageWrap">
		<block v-for="(item, index) in tableData" :key="index">
			<view class="J_roomOrder">
				<view class="J_card">
					<view class="uni-flex uni-row" @click="zslide(item, index)">
						<view class="J_tit">
							<view class="J_cicon"></view>
							{{item.name}}
							<uniIcon type="arrowdown" size="20" class="J_slideIcon" v-if="!item.slideHide"></uniIcon>
							<uniIcon type="arrowup" size="20" class="J_slideIcon" v-if="item.slideHide"></uniIcon>
						</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="J_label">订单号：</view>
						<view class="J_des">{{item.id}}</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="J_label">供应商：</view>
						<view class="J_des">{{item.supplier}}</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="J_label">发票复核：</view>
						<view class="J_des">
							<text v-if="item.statusinv=='Y'" class="J_status status1">已复核</text>
						
							<text v-if="item.statusinv=='N'" class="J_status status3">未复核</text>
					
						</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="J_label">商品复核：</view>
						<view class="J_des">
							<text v-if="item.statusmed=='Y'" class="J_status status1">已复核</text>
						<!--	<text v-if="item.statusMed && !item.statusInv" class="J_status">已复核</text>
							<text v-if="!item.statusMed && item.statusInv" class="J_status status2">未复核</text>
							-->
							<text v-if="item.statusmed=='N'" class="J_status status3">未复核</text>
						</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="J_label">发票号：</view>
						<view class="J_des">{{item.invoicecode}}</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="J_label">订单数：</view>
						<view class="J_des">{{item.num}}</view>
					</view>
					<view class="uni-flex uni-row">
						<view class="J_label">复核数：</view>
						<view class="J_des">{{item.smnum}}</view>
					</view>
					<view class="uni-flex uni-row" :class="{no_border: !item.slideHide}">
						<view class="J_label">复核时间：</view>
						<view class="J_des">{{item.checkdate}}</view>
					</view>
					<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
						<view class="J_label">规格：</view>
						<view class="J_des">{{item.specifications}}</view>
					</view>
					<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
						<view class="J_label">单位：</view>
						<view class="J_des">{{item.unit}}</view>
					</view>
					<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
						<view class="J_label">厂商：</view>
						<view class="J_des">{{item.factory}}</view>
					</view>
					<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
						<view class="J_label">单价：</view>
						<view class="J_des">{{item.unitprice | priceFormat(2,'￥',true)}}</view>
					</view>
					<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
						<view class="J_label">金额：</view>
						<view class="J_des">{{item.price | priceFormat(2,'￥',true)}}</view>
					</view>
					<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
						<view class="J_label">批号：</view>
						<view class="J_des">{{item.batchnumber}}</view>
					</view>
					<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
						<view class="J_label">有效期：</view>
						<view class="J_des">{{item.validity}}</view>
					</view>
					<view class="uni-flex uni-row" :class="{isSlide: !item.slideHide}">
						<view class="J_label">生产日期：</view>
						<view class="J_des">{{item.productdate}}</view>
					</view>
				</view>
			</view>
		</block>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		
		<uni-drawer :visible="rightDrawerVisible" mode="right" @close="closeRightDrawer" zuiWidth="72" zuiDrawerClass="zuiDrawer">
			<view style="padding: 30upx 20upx;">
				<form @submit="formSubmit" @reset="formReset">
					<view class="section section_gap">
						<view class="section__title">药品名称</view>
						<view class="section_con">
							<input name="invoiceId" placeholder="请输入药品名称" :value="invoiceId" class="zinput J_invoiceId" :maxlength="maxlength" />
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">订单号</view>
						<view class="section_con">
							<input name="orderId" placeholder="请输入订单号" :value="orderId" class="zinput J_invoiceId" :maxlength="maxlength" />
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">发票复核</view>
						<view class="section_con">
							<view class="uni-flex J_tagWrap">
								<view class="J_tag" @click="setTagVal('1')" :class="{'zcheck': statusInv==1}">已复核</view>
								<view class="J_tag" @click="setTagVal('2')" :class="{'zcheck': statusInv==2}">待复核</view>
							</view>
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">商品复核</view>
						<view class="section_con">
							<view class="uni-flex J_tagWrap">
								<view class="J_tag" @click="setTagValS('1')" :class="{'zcheck': statusMed==1}">已复核</view>
								<view class="J_tag" @click="setTagValS('2')" :class="{'zcheck': statusMed==2}">待复核</view>
							</view>
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">日期选择</view>
						<view class="section_con">
							<picker class="zpicker" mode="date" :value="startdate" :start="mindate" :end="maxdate" @change="bindDateChange">
								<view class="uni-input zinput">{{startdateDes}}</view>
							</picker>
							<text class="zsplit">-</text>
							<picker class="zpicker" mode="date" :value="enddate" :start="startdate" :end="curdate" @change="bindDateChangeS">
								<view class="uni-input zinput">{{enddateDes}}</view>
							</picker>
						</view>
					</view>
					<view class="section section_gap">
						<view class="section__title">供应商</view>
						<view class="section_con">
							<picker class="zpicker" @change="bindPickerChangeD" :value="supplierIndex" :range="supplierList" range-key="name">
								<view class="uni-input zinput">{{supplierList[supplierIndex].name}}</view>
							</picker>
						</view>
					</view>
					<view class="btn-area">
						<button formType="reset" class="J_reset zbtn">重置</button>
						<button formType="submit" type="warn" class="J_sub zbtn">提交</button>
					</view>
				</form>
			</view>
		</uni-drawer>
	</view>
</template>
<script>

import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
import uniIcon from "@/components/uni-icon/uni-icon.vue";
import {zCheckresList, zSupplierList} from '@/util/api';
import {
	mapState,mapGetters,mapMutations,mapActions
} from 'vuex'
export default {
	components: {
		uniDrawer,
		uniIcon
	},
	data() {
		return {
			tableData: [],
			total: 0,
			start: 1,
			pageSize: 10,
			loadMoreText: "加载中...",
			showLoadMore: false,
			rightDrawerVisible: false,
			maxlength: 20,
			invoiceId: '',
			orderId: '',
			statusInv: '',
			statusMed: '',
			startdate: '',
			enddate: '',
			startdateDes: '',
			enddateDes: '',
			mindate: '',
			maxdate: '',
			curdate: '',
			supplierIndex: 0,
			supplierList: [
				{
					id: '',
					name: '全部'
				}
			]
		}
	},
	computed: {
		...mapState(['w_planId'])
	},
	onLoad() {
		this.initDate();
		this.fetchAllData();
	},
	onUnload() {
		this.resetPage();
	},
	onNavigationBarButtonTap(e) {
		this.rightDrawerVisible = !this.rightDrawerVisible;
	},
	onReachBottom() {
		this.showLoadMore = true;
		if(this.total && this.tableData.length < this.total){
			this.loadMoreText = "加载更多";
			this.fetchData();
		}else if(this.total && this.tableData.length == this.total){
			this.loadMoreText = "没有更多数据了!";
			return;
		}
	},
	onPullDownRefresh() {
		this.resetPage();
		this.fetchData();
	},
	methods: {
		initDate () {
			let curDate = new Date(),
				cdate = this.zutil.getCurDate(curDate),
				_m = ((curDate.getMonth()+1)<10) ? ("0"+(curDate.getMonth()+1)) : (curDate.getMonth()+1),
				firstdate = curDate.getFullYear() + "-"+ _m + "-01";
				
			this.mindate = '1949-01-01';
			this.maxdate = cdate;
			this.curdate = cdate;
			this.startdate = firstdate;
			this.enddate = cdate;
			this.startdateDes = '开始日期';
			this.enddateDes = '结束日期';
		},
		resetPage () {
			this.tableData = [];
			this.total = 0;
			this.start = 1;
			this.loadMoreText = "加载更多";
			this.showLoadMore = false;
		},
		async fetchAllData () {
			let res = await zSupplierList();
			res = this.zutil.formatAxiosData(res);
			if(res.status == 0){
				this.supplierList = this.supplierList.concat(res.data);
			}else{
				this.zutil.ztip(res.description || "获取供应商列表失败！");
				this.zutil.zuiShaker();
			}
			this.fetchData();
		},
		async fetchData () {
			let s1 = this.startdateDes,
				s2 = this.enddateDes;
			if(s1 == '开始日期') {
				s1 = '';
			}else{
				s1 = this.startdate;
			}
			if(s2 == '结束日期') {
				s2 = '';
			}else{
				s2 = this.enddate;
			}
			let tpl_param = {
				goodname: this.invoiceId,
				orderId: this.orderId,
				statusInv: this.statusInv,
				statusMed: this.statusMed,
				startdate: s1,
				enddate: s2,
				supplier: this.supplierList[this.supplierIndex].id,
				page: this.start,
				pagesize: this.pageSize
			}
			uni.showLoading({title: '加载中', mask: true});
			let res = await zCheckresList(tpl_param);
			res = this.zutil.formatAxiosData(res);
			uni.hideLoading();
			this.tableData = this.tableData.concat(res.data.list);
			this.total = res.data.total;
			this.start++;
			uni.stopPullDownRefresh();
		},
		closeRightDrawer() {
			this.rightDrawerVisible = false;
		},
		formSubmit: function (e) {
			let data = e.detail.value;
			this.invoiceId = data.invoiceId;
			this.orderId = data.orderId;
			this.rightDrawerVisible = false;
			this.resetPage();
			this.fetchData();
		},
		formReset: function (e) {
			this.initDate();
			this.invoiceId = '';
			this.orderId = '';
			this.statusInv = '';
			this.statusMed = '';
			this.supplierIndex = 0;
		},
		setTagVal (val) {
			this.statusInv = this.statusInv == val ? '' : val;
		},
		setTagValS (val) {
			this.statusMed = this.statusMed == val ? '' : val;
		},
		bindDateChange: function(e) {
			this.startdate = e.target.value;
			this.startdateDes = e.target.value;
		},
		bindDateChangeS: function(e) {
			this.enddate = e.target.value;
			this.enddateDes = e.target.value;
		},
		bindPickerChangeD: function(e) {
			this.supplierIndex = e.target.value;
		},
		pickerClick () {
			this.rightDrawerVisible = false;
		},
		retNewClass (item, type) {
			if(item.statusInv && item.statusMed) {
				return 'status1';
			}else{
				if(item.statusInv && !item.statusMed){
					if(type == 2){
						return 'status2';
					}
				}else if(!item.statusInv && item.statusMed){
					if(type == 1){
						return 'status2';
					}
				}else{
					return 'status3';
				}
			}
		},
		zslide (item, index) {
			let slideFlag = item.slideHide;
			this.$set(item, 'slideHide', !slideFlag);
		},
	},
	filters:{
		//价格过滤器
		// arg表示原始参数,num表示小数点位,默认保留两位,symbol表示符号,spilt是否进行逗号分隔【true，false】
		priceFormat:function (arg,num=0,symbol,spilt=false) {
			/**
			 * 默认数字: {{number|priceFormat()}}
				保留两位小数: {{number|priceFormat(2)}}
				保留三位小数: {{number|priceFormat(3)}}
				添加￥符号并保留两位: {{number|priceFormat(2,'￥')}}
				添加$符号并保留三位: {{number|priceFormat(3,'$')}}
				添加千分号符号: {{number|priceFormat(0,'',true)}}
				添加千分号符号并保留两位: {{number|priceFormat(2,'',true)}}
				添加￥和千分号符号并保留两位: {{number|priceFormat(2,'￥',true)}}
			 **/
			arg=Number(arg).toFixed(num);
			if(spilt==true){
				if (arg.indexOf('.') == -1) {
					arg=arg.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}else{
					var parts = arg.split(".");
					parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					arg=parts.join(".");
				}
			}
			if(symbol){
				arg=symbol+arg;
			}
			return arg;
		},
	}
}
</script>

<style scoped lang="scss">
.zuipageWrap {
	background: #F5F5F5;
	.J_roomOrder {
		background: #fff;
		padding: 0;
		margin-bottom: 32upx;
		position: relative;
		box-shadow: 0 6upx 20upx rgba(0,0,0,.1);
		.J_card {
			border-top: 2upx solid #ddd;
			border-bottom: 2upx solid #ddd;
			background: #fff;
			padding: 0 32upx;
			color: #3C3C3C;
			margin-bottom: 20upx;
			overflow: hidden;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.uni-row {
				border-bottom: 2upx solid #e5e5e5;
				padding: 18upx 0;
				&.no_border {
					border-bottom: 0;
				}
				&:first-child {
					padding: 28upx 0;
				}
				&:last-child {
					border-bottom: 0;
				}
				&.isSlide {
					display: none!important;
				}
				.J_tit {
					height: 44upx;
					line-height: 44upx;
					font-size: 30upx;
					position: relative;
					padding-left: 32upx;
					font-weight: bold;
					overflow: hidden;
					width: 100%;
					.J_cicon {
						position: absolute;
						left: 0;
						top: 0;
						width:12upx;
						height: 44upx;
						background: #FFC12E;
						display: block;
					}
					.J_slideIcon {
						position: absolute;
						right: 0;
						top: 6upx;
					}
				}
				.J_label {
					width: 184upx;
				}
				.J_des {
					flex: 1;
					position: relative;
					text-align: right;
					.uni-input {
						padding: 0 56upx 0 24upx;
					}
					
					.J_status {
						font-weight: bold;
						&.status1 {
							color: green;
						}
						&.status2 {
							color: #b6b600;
						}
						&.status3 {
							color: red;
						}
					}
				}
			}
			.scroll-Y {
				height: 300upx;
			}
		}
	}
	.price {
		color: #e4a000;
		font-weight: normal;
	}
	.J_totalPrice {
		color: #e4a000;
		font-weight: bold;
	}
}
/**
 * 侧边栏
 **/
.zuiDrawer {
	.zinput {
		div {
			width: 100%;
			padding: 0 10px;
			.input-placeholder {
				font-size: 12px;
			}
		}
	}
	.section_gap {
		margin-bottom: 40upx;
		.section__title {
			font-size: 34upx;
			margin-bottom: 20upx;
			color: #000;
			position: relative;
			padding-left: 20upx;
			
			&:before {
				position: absolute;
				left: 0;
				top: 12upx;
				content: '';
				width: 6upx;
				background: #e64340;
				height: 60%;
			}
		}
		.section_con {
			margin-bottom: 20upx;
			display: flex;
			.zsplit {
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				width: 80upx;
				font-size: 40upx;
				font-weight: normal;
			}
			.zinput {
				display: inline-block;
				width: 100%;
				border: 1px solid #F6F6F6;
				background: #F6F6F6;
				border-radius: 60upx;
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				padding: 0;
				overflow: hidden;
				div {
					width: 100%;
					text-align: center;
					input {
						width: 90%;
						text-align: center;
					}
				}
			}
			.J_tagWrap {
				align-items: center;
				justify-content: space-around;
				width: 100%;
				.J_tag {
					padding: 0 16upx;
					height: 64upx;
					line-height: 64upx;
					width: 100%;
					background: #f6f6f6;
					color: #333;
					text-align: center;
					border-radius: 60upx;
					margin-left: 20upx;
					border: 2upx solid #F1F1F1;
					
					&.zcheck {
						background: #FEF4F3;
						color: #FF0000;
						border: 2upx solid #FF0000;
					}
					
					&:first-child {
						margin-left: 0;
					}
				}
			}
			.zpicker {
				width: 100%;
			}
		}
	}
	.btn-area {
		position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
		height: 92upx;
		.zbtn {
			border: 0;
			border-radius: 0;
			display: inline-block;
			&:after {
				width: 0;
				height: 0;
			}
			&.J_sub {
				width: 65%;
			}
			&.J_reset {
				width: 35%;
			}
		}
	}
}
</style>
